<template>
  <div class="demo">
    <div class="demo-title">选择不超过七天的范围</div>
    <div class="demo-content">
      <DatePicker.RangePicker
        :value="hackValue || value"
        :disabled-date="disabledDate"
        @change="onChange"
        @open-change="onOpenChange"
        @calendar-change="onCalendarChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import DatePicker from '@sscd/date-picker';
  type RangeValue = [Dayjs, Dayjs] | [string, string];
  const dates = ref<RangeValue>();
  const value = ref<RangeValue>();
  const hackValue = ref<RangeValue>();
  const disabledDate = (current: Dayjs) => {
    if (!dates.value || (dates.value as any).length === 0) {
      return false;
    }
    const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 7;
    const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 7;
    return tooEarly || tooLate;
  };
  const onOpenChange = (open: boolean) => {
    if (open) {
      dates.value = [] as any;
      hackValue.value = [] as any;
    } else {
      hackValue.value = undefined;
    }
  };
  const onChange = (val: RangeValue) => {
    value.value = val;
  };
  const onCalendarChange = (val: RangeValue) => {
    dates.value = val;
  };
</script>
